<template>
  <div>
    <edu-title title="我的订单"></edu-title>
      <el-tabs v-model="activeTab" @tab-change="changeTabs">
      <el-tab-pane label="全部" name="0">
  
      </el-tab-pane>
      <el-tab-pane label="待付款" name="1">
    
      </el-tab-pane>
        <el-tab-pane label="已付款" name="3">
    
      </el-tab-pane>
        <el-tab-pane label="已取消" name="99">
    
      </el-tab-pane>
    </el-tabs>
    <div class="warp" v-infinite-scroll="infinite_scroll_load" style="max-height:600px; "  
      infinite-scroll-disabled="disabled"
    ><!--:style="{'max-height':$store.getters.tabMaxHeight+'px'}" -->
      <orderTable v-for="order in orderList" @cancel="cancelOrder" :key="order.orderId" :order="order"></orderTable>
      <el-empty v-if="orderList.length<=0" description="暂无数据"></el-empty>
    </div>
    <el-pagination
      class="pagination"
      @current-change="getOrderList"
      :page-size="pageSize"
      hide-on-single-page
      layout="prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script lang="ts" >

import orderTable from "/@/components/order/orderTable.vue"
import eduTitle from "/@/components/userCenter/title.vue";

import { orderList } from "/@/api/order"

export default {
  components: {
    orderTable,
    eduTitle
  },
  data() {
    return {
      total:0,
      pageSize:50,
      activeTab:'0',
      orderList:[

      ],
    }
  },
  mounted(){
    this.getOrderList()
  },
  methods:{
    infinite_scroll_load() { // 

    },
    cancelOrder(orderInfo) {
      const index = this.orderList.findIndex(order=>order.orderId ===orderInfo.orderId)
      if(index>=0){
        let order = this.orderList[index]
        order.status = orderInfo.status
        this.$set(this.orderList,index,order)
      }
    },
    changeTabs:function() {
      this.getOrderList()
    },
    // 课程列表
    getOrderList(page = 1, params = {}) {
      let offset = (page - 1) * this.pageSize;
      orderList({
        offset: offset,
        size: this.pageSize,
          status:parseInt(this.activeTab),
        ...params,
      })
      .then((res) => {
        const { orderInfos, total } = res;
        this.orderList = orderInfos
        this.total = total;
      })
      .catch((err) => {
        console.error(err);
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.warp{
  overflow:auto
}
</style>